<template>
    <div class="indexArea">
        <!-- 搜索栏 -->
        <Search></Search>
        <!-- 轮播区域 -->
        <div class="lunboArea">
          <el-carousel :interval="5000" arrow="always"  height="150px">
            <el-carousel-item v-for="item in backImg" :key="item.goods_id">
                <img class="lunboPic" :src="item.image_src" />
            </el-carousel-item>
            </el-carousel>
        </div>
        <!-- 导航区域 -->
        <div class="navArea">
            <div class="navItem" v-for="item in navImg" :key="item.name">
                <img  :src="item.image_src" />
            </div>
        </div>
        <!-- 楼层区域 -->
        <div class="loucengArea">
            <div class="loucengItem clearFix" v-for="item in loucengImg" :key="item.index">
                <div class="title">
                    <img class="titleImg" :src="item.floor_title.image_src" alt="">
                </div>
                <div class="product" v-for="product in item.product_list" :key="product.index">   
                    <img class="productImg" :src="product.image_src" alt="">
                </div>
            </div>
        </div>
        <div class="footBlank"></div>
    </div>
</template>
<script>
// import axios from 'axios'
import Search from '@/components/Search'
export default {
    name:'index',
    data () {
        return {
            backImg:[], //轮播图照片数组
            navImg:[],   // 导航分类
            loucengImg:[]
        }
    },
    components: {
        Search
    },
    mounted(){
        // 获取轮播图数据
       let promise1= this.axios.get('/home/swiperdata')
       promise1.then((res)=>{
        //    console.log(res)
           this.backImg=res.data.message
       })
        //  请求分类
        let promise2=this.axios.get('/home/catitems')
        promise2.then((res)=>{
            // console.log(res)
            this.navImg=res.data.message
        })
        // 请求楼层数据
        let promise3=this.axios.get('/home/floordata')
        promise3.then((res)=>{
            // console.log(res)
            this.loucengImg=res.data.message
        })   
    },
    methods:{

    },
    computed:{
       
    },
    beforeDestroy(){
        console.log( 'beforeDeatory')
    },
    destroyed(){
        console.log('--destory---')
    }
}
</script>
<style lang="less" scoped>
.indexArea{
    // 轮播区域样式
    .lunboPic{
        width: 100%;
    }
    // 导航区域样式
    .navArea{
        display: flex;
        justify-content: space-around;
        width: 100%;
        .navItem{
            width: 20%;
            img{
                width: 100%;
            }
        }
    }
    // 楼层样式
    .loucengArea{
        .titleImg{
            width: 100%;
        }
        .product{
            float: left;
            width: 30%;
            .productImg{
                width: 100%;
                margin-right: 4px;
            }
        }
    }
    .footBlank{
        height: 60px;
    }
}
</style>